<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>树状图</title>
	<style>
		svg{width: 1200px;height: 1000px;display: block;}
		path.link{stroke: #aaa;stroke-width: 1.5px;fill:transparent;}
		.node circle{fill:#fff;stroke:steelblue;stroke-width: 1.5px;}
	</style>
	<script src="d3/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>



</body>
<script type="text/javascript">


//画布大小
var width = 1800;
var height = 800;

//在 body 里添加一个 SVG 画布   
var svg = d3.select("body")
	.append("svg")
	.append('g')
	.attr("width", width)
	.attr("height", height)
	.attr("transform", "translate(80,0)");

//定义一个集群图布局
var tree = d3.layout.tree()
	.size([600, 500])
	.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2); });

// 根据节点名对树进行排序（取消这一步不影响树结构的生成，只是不会做排序）
tree.sort(function(a, b) {return b.name.toLowerCase() < a.name.toLowerCase() ? 1 : -1;});

d3.json("learn15.json", function(error, root) {
	var nodes = tree.nodes(root);
	var links = tree.links(nodes);
//	console.log(nodes);
//	console.log(links);

	//对角线生成器
	var diagonal = d3.svg.diagonal()
		.projection(function(d) { return [d.y, d.x]; });

	//绘制连线
	var link = svg.selectAll(".link")
		.data(links)
		.enter()
		.append("path")
		.attr("class", "link")
		.attr("d", diagonal);   //使用对角线生成器
	
	//绘制节点
	var node = svg.selectAll('.node')
		.data(nodes)
		.enter()
		.append('g')
		.attr('class','node')
		.attr('transform',function (d) {return "translate(" + d.y + "," + d.x + ")";});
	
	//添加文字信息
	node.append('circle').attr('r',5);
	node.append('text')
		.attr("dx", function(d) { return d.children ? -8 : 8; })
		.attr("dy", 3).style("text-anchor", function(d) { return d.children ? "end" : "start"; })
		.append("a").attr('href',"https://www.baidu.com/").text(function(d) { return d.name; });
})

</script>
</html>
